<template>
	<view class="created-content">
		<view class="created-content-container">
			<view class="top">
				<view class="text">最近添加</view>
				<button type="primary" 
				size="mini" 
				class="moreDone" 
				v-show="isMore" 
				@touchstart="moreDone">多项完成</button>
			</view>
			<view class="list-container">
				<view 
				v-for="(item,index) in recentList"
				:key="item.id" 
				class="list-item"
				:class="item.isMove?'goFar':''"
				>
				<view class="item-left">
					<checkBox :listItem="item" :recentList="recentList"></checkBox>
					<!-- <checkbox-group @change="switchStatus(item)">
						<label>
							<checkbox :checked="item.isChoose" />
						</label>
					</checkbox-group> -->
						<view class="contnet">{{item.content}}</view>
				</view>
					<view class="item-right">
						<submitButton :listItem="item" :moreMini="true"></submitButton>
						<!-- <button 
						type="primary"
						size="mini" 
						class="done" 
						@touchstart="handleDone(item)"
						:disabled="!item.isChoose"
						>完成</button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import checkBox from './checkbox.vue' 
import submitButton from './submit.vue'
export default {
	props:{
		
	},
	data() {
		return {
			list:[],
			isMore:false,
			// arr:[],
			recentList:[]
		};
	},
	components:{
		checkBox,
		submitButton
	},
	mounted() {
		//接收刚刚新添加的任务传过来的数据，更新最近添加的任务列表
		uni.$on("list",(data)=>{
			console.log("接收的list")
			this.recentList=data
			this.list=data
			this.filterDone()
			console.log(this.recentList)
			//传给checkbox组件用于显示完成多项任务按钮
			//当刷新页面的时候不会触发这个方法，所以要通过父组件向子组件传值实现对应功能
			// uni.$emit("recentList",this.recentList)
		})
		uni.$on("showMoreButton",(data)=>{
			this.isMore=data
		})
		uni.$on("filterDone",()=>{
			this.filterDone()
		})
		// uni.$on("updateList",()=>{
		// 	uni.setStorage({
		// 		key:"list",
		// 		data:JSON.stringify(this.list)
		// 	})
		// })
	},
	watch:{
		taskList(newvalue,oldvalue){
		}
	},
	methods:{
		//点击完成按钮时的操作
		handleDone(item){
			if(item.isChoose){
				//通过延迟1毫秒解决和确定按钮重叠也会点到确定按钮的问题
				let _this=this
				setTimeout(()=>{
					uni.showModal({
						title:"消息",
						content:"完成此项任务",
						success(res) {
							// 这个延迟函数是为了动画的
							if(res.confirm){
								setTimeout(()=>{
									item.isMove=true
								},200)
							//这个延迟函数是为了更新状态的，也是过滤掉完成的任务
								setTimeout(()=>{
									item.isDone=true
									item.doneDate=_this.setDate()
									//再次触发这个函数是因为当点击一个完成后，再点一个就会显示多项按钮，所以手动再过滤一次解决bug
									_this.filterDone()
									
									uni.setStorage({
										key:"list",
										data:JSON.stringify(_this.temp) //这里存要存temp因为recentList全都是未完成，如果存了recentList的话之前完成的全都不见了
									})
								},602)
								return
							}else{
								return
							}
						}
					})
				},100)
				
			}
		},
		
		moreDone(){
			uni.showModal({
				title:"消息",
				content:"完成这些任务",
				success:(res)=> {
					if(res.confirm){
						this.arr.forEach((item)=>{
							setTimeout(()=>{
								item.isMove=true
							},200)
							
							
							setTimeout(()=>{
								item.isDone=true
								uni.setStorage({
									key:"list",
									data:JSON.stringify(this.list)
								})
								
								this.isMore=false
							},602)
						})
						
					}else{
						console.log("取消了")
					}
				}
			})
		},
		
		setDate(){
			const date=new Date()
			let year=date.getFullYear()
			let month=date.getMonth()+1
			let day=date.getDate()
			month=month<10?`0${month}`:month
			day=day<10?`0${day}`:day
			return `${year}/${month}/${day}`
		},
		
		filterDone(){
			this.recentList=this.recentList.filter((item)=>{
				return item.isDone===false
			})
		}
	},
	computed:{
		// recentList(){
		// 	return this.temp.filter((item)=>{
		// 		return item.isDone===false
		// 	})
		// }
	},
	watch:{
		// recentList(newvalue){
		// 	console.log("recentList更新时的watch",newvalue)
		// 	uni.$emit("recentList",newvalue)
		// }
	}
};
</script>

<style lang="less">
.created-content {
	margin-top: 30rpx;
	height: 570rpx;
	overflow: hidden;
	.created-content-container{
		.top{
			display: flex;
			height: 70rpx;
			line-height: 70rpx;
			.text {
				font-size: 33rpx;
				color: #333333;
				font-weight: bold;
				font-family: 'Times New Roman', Times, serif;
			}
			.moreDone{
				float: right;
				margin-top: 6rpx;
				margin-right: 70rpx;
				letter-spacing: 2rpx;
				background-color: #019875;
			}
		}
		
		.list-container{
			padding-left: 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			.list-item{
				display: flex;
				font-size: 32rpx;
				color: #555555;
				height: 80rpx;
				line-height: 80rpx;
				transition: all 0.6s;
				&.goFar{
					animation:farANDdisapper 0.6s;
					animation-iteration-count: 1;
				}
				.item-left{
					width: 70%;
					display: flex;
					.contnet{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-left: 10rpx;
								
					}
				}
				.item-right{
					height: 100%;
					padding-top: 15rpx;
					box-sizing: border-box;
				}
				
			}
		}
	}
	@keyframes farANDdisapper{
		0%{
			transform: translateX(0);
		}
		100%{
			transform: translateX(-100%);
		}
	}
}
</style>
